<template>
  <div id="writeArticle" >
    <el-dialog style="background-color: rgb(192,243,252)" title="发帖" :visible.sync="visible" top="0.5rem" :lock-scroll="false" :show-close="false" :close-on-click-modal="false">
      <el-form ref="floraArticleForm" :model="floraArticle" label-width="100px">

        <el-form-item label="日期:" prop="createTime" >
          <div style="display:grid;justify-content:start">{{floraArticle.createTime}}</div>
        </el-form-item>
        <el-form-item label="帖子类型:" prop="type" >
          <div v-if="isHelp===1" style="display:grid;justify-content:start">{{typeList[2].name}}</div>
          <el-select v-if="isHelp===0" v-model="floraArticle.typeId" placeholder="帖子类型" style="width: 130px;right: 175px">
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章标题：" prop="summary">
          <el-input v-model="floraArticle.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="description">
          <el-input type="textarea" :rows="10" v-model="floraArticle.content" resize="none" maxlength="500" show-word-limit palceholder="备注"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="avatarlist" style="display:grid;justify-content:start">
            <el-upload
                name="img"
                :action="uploadURL"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img   v-if="floraArticle.thumbnail" :src="floraArticle.thumbnail" width="300" height="200">
              <i v-else class="el-icon-plus avatar-uploader-icon"  width="300" height="200"></i>
              <div style="margin-top: 50px" slot="tip" class="el-upload__tip">点击上传图片，只能上传jpg/png文件，且不超过1mb</div>
            </el-upload>
          </div>
        </el-form-item>

      </el-form>
      <span slot="footer">
      <el-button type="info" @click="resetForm('plantForm')">取消</el-button>
         <el-button type="success" @click="submitToCommunity(floraArticle)">发布到社区</el-button>

    </span>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "WriteArticle",
  data(){
    return{
      isHelp:0,
      answerTo:0,
      uploadURL:'',
      visible:false,
      typeList:[
        {
          id:1,
          name:'养花日常'
        },
        {
          id:2,
          name:'求助帖'
        },
        {
          id:3,
          name:'帮助帖'
        },
        {
          id:4,
          name:'商家帖'
        }
      ],
      type_str:'',
      date:'',
      questionAnswer:{
        questionId:'',
        answerId:''
      },
      floraArticle:{
        id:'',
        //标题
        title:'',
        //文章内容
        content:'',
        //文章摘要
        summary:'',
        //所属分类id：属于哪个专区
        categoryId:'',
        //缩略图
        thumbnail:'',
        //是否置顶（0否，1是）
        isTop:'',
        //状态（0已发布，1草稿）
        status:'',
        //访问量
        viewCount:'',
        //是否允许评论 是，1否
        isComment:'',

        createBy:'',

        createTime:'',

        updateBy:'',

        updateTime:'',
        //删除标志（0代表未删除，1代表已删除）
        delFlag:'',
        //文章类型（0每日百科，1分享，2求助，3解答  4:商家发帖）
        typeId:'',
        //点赞量
        likeCount:'',
        //收藏量
        collectCount:'',
        //关联植物id
        plantId:''
      }
    }
  },
  created() {
    this.uploadURL = store.state.baseURL+'upload'
    console.log(this.uploadURL)
    let user=JSON.parse(localStorage.getItem("userInfo"))
    this.floraArticle.createBy=user.id
  },
  methods:{
    routeChange(){

    },
    open(categoryId,help,answerTo){
      this.isHelp=help
      if(this.isHelp===1){
        this.floraArticle.typeId=3;
        this.answerTo=answerTo
      }
      console.log("open write")
      this.floraArticle.categoryId=categoryId
      this.format();
      this.visible=true
    },
    addQ_A(qid,aid){
      this.questionAnswer.questionId=qid
      this.questionAnswer.answerId=aid
    },
    resetForm (plantForm) {
      this.$nextTick(() => {
        this.$refs.floraArticleForm.clearValidate()
      })
      this.floraArticle={}
      this.visible = false
    },
    format() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      }
      const newmonth = date.month > 9 ? date.month : '0' + date.month
      const day = date.date > 9 ? date.date : '0' + date.date
      this.date = date.year + '.' + newmonth + '.' + day
      this.floraArticle.createTime=this.date
    },
    handleAvatarSuccess(res, file) {//上传头像
      //console.log("plant_img",res)
      if(res != null){
        this.floraArticle.thumbnail = res;
      }else{
        this.$message.error('上传图片失败');
      }

    },
    beforeAvatarUpload(file) {//判断图片大小
      const isJPG = file.type == 'image/png'||file.type=='image/jpg'||file.type=='image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return isJPG && isLt2M;
    },
    submitToCommunity(plantdiary1){
      this.$confirm('确认发布吗？', '是否发布', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        lockScroll: false,
        type: 'warning'
      }).then(() => {
        console.log('this.fileList', this.fileList)
        this.$emit('confirmData', this.floraArticle,this.fileList,this.answerTo,this.isHelp)
        this.$message.success("发布日记成功")
        this.resetForm()
      })
    },
  }
}
</script>

<style scoped>

</style>